<template>
  <div class="dashboard-editor-container" style="overflow: hidden">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="20" class="card-box">

        <listAll @getsalesGrade="getsalesGrade" />

      </el-col>
      <!-- <el-col :span="14">


        <listAllList @getsalesGrade="getsalesGradeList" />
      </el-col> -->

      <el-col :span="4">
        <el-radio-group v-model="query.dateType" size="small" v-show="activeName != 0" @change="getdataRange">
          <el-radio-button v-for="(item, index) in typeArr" :key="index" :label="item.value">{{ item.label
          }}</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="商品全局概况" name="0">
        <X v-if="activeName == 0" :query="query" />
      </el-tab-pane>
      <el-tab-pane label="品类销售趋势分析" name="8">
        <I v-if="activeName == 8" :query="query" :dataYear="dataYear"></I>
      </el-tab-pane>
      <el-tab-pane label="品类销售目标情况" name="1">
        <II v-if="activeName == 1" :query="query" :dataYear="dataYear" />
      </el-tab-pane>
      <el-tab-pane label="品类访客转化分析" name="2">
        <III v-if="activeName == 2" :query="query" :dataYear="dataYear" />
      </el-tab-pane>
      <el-tab-pane label="产品层级分析" name="4">
        <V v-if="activeName == 4" :query="query" :dataYear="dataYear" />
      </el-tab-pane>
      <el-tab-pane label="销售类目分析" name="5">
        <VI v-if="activeName == 5" :query="query" :dataYear="dataYear" />
      </el-tab-pane>
      <el-tab-pane label="销售结构分析" name="6">
        <VII v-if="activeName == 6" :query="query" :dataYear="dataYear" />
      </el-tab-pane>
      <el-tab-pane label="销售Top同期单品分析" name="7">
        <IX v-if="activeName == 7" :query="query" :dataYear="dataYear" />
      </el-tab-pane>
      <el-tab-pane label="产品上新分析" name="3">
        <IV v-if="activeName == 3" :query="query" :dataYear="dataYear" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  selectCategoryVisitorTend,
  selectCategoryVisitorYoy,
  dataRange,
  lastDataRange
} from "@/api/productStructure/BiCategoryBasicsDwd";
import listAll from "./components/listAll";
import listAllList from "./components/listAllList";
import I from "./I.vue";
import II from "./II.vue";
import III from "./III.vue";
import IV from "./IV.vue";
import V from "./V.vue";
import VI from "./VI.vue";
import VII from "./VII.vue";
import IX from "./IX.vue";
import X from "./X.vue";
export default {
  name: "productSale",
  dicts: [
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
  ],
  components: {
    listAll,
    listAllList,
    I,
    II,
    III,
    IV,
    V,
    VI,
    VII,
    IX,
    X,
  },
  data() {
    return {

      dataYear: {
        dataYear: '',
        lastdataYear: '',

      },
      activeName: 0,

      query: {
        proBrandList: [],
        salesGrade: [],
        dateType: "近30天",
      },
      // 店铺
      cascadeList: [],
      //

      typeArr: [
        { value: "近30天", label: "近30天" },
        { value: "近3个月", label: "近3个月" },
        { value: "近1年", label: "近1年" },
      ],

      //
      barChartData: {
        columns: [],
        rows: [],
      },
    };
  },
  created() {
    this.getdataRange()
  },
  watch: {

    activeName: {
      handler: function (newnew, oldold) {
        if (this.activeName == 3) {
          this.typeArr = [
            // { value: "近30天", label: "近30天" },
            // { value: "近3个月", label: "近3个月" },
            { value: "近1年", label: "近1年" },
          ]
          this.query.dateType = '近1年'
          this.getdataRange()
        } else {
          this.typeArr = [
            { value: "近30天", label: "近30天" },
            { value: "近3个月", label: "近3个月" },
            { value: "近1年", label: "近1年" },
          ]
        }
        if (this.activeName == 5) {
          this.query.dateType = '近1年'
          this.getdataRange()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleClick(tab, event) {

    },
    getdataRange() {
      dataRange({ dateType: this.query.dateType }).then(response => {
        this.dataYear.dataYear = response
      })
      lastDataRange({ dateType: this.query.dateType }).then(response => {
        this.dataYear.lastdataYear = response
      })
    },
    //
    getsalesGrade(salesGrade, type) {
      if (type == 0) {
        this.query.salesGrade = salesGrade;
        this.query.proBrandList = null
      } else {
        this.query.proBrandList = salesGrade;
        this.query.salesGrade = null
      }

    },
    getsalesGradeList(type) {
      this.query.proBrandList = type;
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载数据，请稍候！");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tabs--card {
  height: calc(100vh - 110px);
  /* overflow-y: auto; */
}

.el-tab-pane {
  overflow-y: auto;
  height: calc(100vh - 110px);
}

::v-deep .el-tabs__content {
  /* height: 185px;
  border-radius: 4px; */
  background-color: rgb(240, 242, 245) !important;
  /* 使用你想要的蓝色 */
}

.el-dialog-div {
  overflow-x: hidden;
  height: 100vh;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 移除默认的列表样式 */
ul {
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: .4%;

  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  list-style-type: none;

  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  color: #bbb;

  /* 设置链接文本样式 */
  font-size: 15px;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  position: relative;

  // padding: 32px;
  background-color: rgb(240, 242, 245);

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
  }

  .chart-wrapper {
    padding: 16px 16px 0;
    margin-bottom: 32px;
    background: #fff;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

// .train-tree-cascader {
//   height: 500px !important;
// }

// .el-scrollbar__wrap {
//   overflow: initial !important;
// }
</style>
